<template>
  <div style="height: 100%">
    <el-table
      ref="multiTable"
      :data="roleData"
      :height="tableHeight"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      border
      default-expand-all
      row-key="id"
      @select="handleSelect">
      <el-table-column
        v-model="multipleSelection"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="名称"
        prop="name"
        sortable
        width="240">
      </el-table-column>
      <el-table-column
        label="操作"
        prop=""
        sortable
        width="240">
        <template slot-scope="scope">
          <el-checkbox v-if="scope.row.id==='calculator'||scope.row.id==='zsct'||scope.row.id==='liuchengtu'
                       ||scope.row.id==='bzsy'||scope.row.id==='book'||scope.row.id==='journal'||scope.row.id==='sck'
                       ||scope.row.id==='fldh'||scope.row.id==='spzgl'"
                       v-model="scope.row.type"
                       label="1">编辑
          </el-checkbox>
          <el-checkbox v-if="scope.row.id==='calculator'||scope.row.id==='zsct'||scope.row.id==='liuchengtu'
                       ||scope.row.id==='bzsy'||scope.row.id==='book'||scope.row.id==='journal'||scope.row.id==='sck'
                       ||scope.row.id==='fldh'||scope.row.id==='spzgl'" v-model="scope.row.push" label="2">推送
          </el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 10px">
      <el-button size="small" type="success" @click="">取消
      </el-button>
      <el-button size="small" type="success" @click="" v-on:click="confirm()">确定
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResourceTable",
  data() {
    return {
      roleData: [],
      tableHeight: '',
      checkList: [],
      multipleSelection: [],
    }
  },
  methods: {
    handleSelect(selection, row) {
      // 如果selection中存在row代表是选中，否则是取消选中
      if (selection.find(val => {
        return val.name === row.name
      })) {
        if (row.children) {
          row.children.forEach(val => {
            this.$refs.multiTable.toggleRowSelection(val, true)
            selection.pushIfNotContains(val)
            if (val.children.length > 0) {
              this.handleSelect(selection, val)
            }
          })
        }
        this.selectFu(selection, row, this.roleData)
      } else {
        this.cleanSelection(selection, row)
      }
      //选中子节点对应父节点选中
      console.log(selection)
      this.multipleSelection = selection
    },
    cleanSelection(selection, row) {
      row.children.forEach(val => {
        this.$refs.multiTable.toggleRowSelection(val, false)
        selection.splice(val)
        if (val.children.length > 0) {
          this.cleanSelection(selection, val)
        }
      })
    },
    selectFu(selection, row, data) {
      if (data.find(item => {
        if (item.id === row.parentId) {
          this.$refs.multiTable.toggleRowSelection(item, true)
          selection.pushIfNotContains(item)
          this.selectFu(selection, item, data)
        }

        if (item.children.length > 0) {
          this.selectFu(selection, row, item.children)
        }
        selection.forEach(s => {
          if (s.parentId === item.id) {
            this.$refs.multiTable.toggleRowSelection(item, true)
            selection.pushIfNotContains(item)
          }
        })
      })) ;

    },
    confirm() {
      let param = new URLSearchParams();
      param.append("selection", JSON.stringify(this.multipleSelection))
      param.append("roleId", this.$route.query.roleId)
      this.axios.post(CONST.SERVICE_REST_PACKAGE + "RoleCtrl/save", param)
        .then(() => {
          this.closeNewDialog()
          this.getTableData()
          this.newRoleDialogVisible = false
        })
    }
  }
  ,
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 216;

    this.axios.get(CONST.SERVICE_REST_PACKAGE + "RoleCtrl/selectResource", {
      params: {}
    }).then((response) => {
      this.roleData = response.data
    })

  }
}
</script>

<style scoped>

</style>
